<template>
  <div class="app-container">
    <el-card>
      <el-row
        :gutter="10"
        class="mb8"
        type="flex"
        justify="space-between"
        style="margin-bottom: 20px"
      >
        <el-col :span="6"
          ><span style="font-size: large">快速查询</span></el-col
        >
      </el-row>
      <!-- el-form 用于渲染查询表单，:model 绑定表单数据，:inline 设置为行内模式 -->
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="110px"
      >
        <el-form-item label="单据编号" prop="vbillcode">
          <el-input
            v-model="queryParams.vbillcode"
            placeholder="请输入单据编号"
            clearable
            style="width: 240px"
            @input="trimInput('vbillcode')"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="单据日期" prop="dbilldate">
          <el-date-picker
            v-model="queryParams.dbilldate"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 240px"
          >
          </el-date-picker>
        </el-form-item>

        <!-- <el-form-item label="WMS入库单号" prop="wmsBillCode">
          <el-input v-model="queryParams.wmsBillCode" placeholder="请输入入库单号" clearable style="width: 240px"
            @input="trimInput('wmsBillCode')" />
        </el-form-item> -->

        <el-form-item label="是否越库" prop="isCross">
          <el-select
            v-model="queryParams.isCross"
            placeholder="请选择是否越库"
            clearable
            style="width: 240px"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="单据状态" prop="billsState">
          <el-select
            v-model="queryParams.billsState"
            placeholder="请选择WMS单据状态"
            clearable
            style="width: 240px"
          >
            <el-option label="未收货" value="0"></el-option>
            <el-option label="已收货" value="1"></el-option>
            <el-option label="已验收" value="2"></el-option>
            <el-option label="已上架" value="3"></el-option>
            <el-option label="已请验" value="4"></el-option>
            <el-option label="请验完成" value="5"></el-option>
            <el-option label="WMS处理失败" value="6"></el-option>
            <el-option label="已作废" value="9"></el-option>
          </el-select>
        </el-form-item>

        <!-- 定义两个 el-option 选项，分别对应：1=作废，2=自由，3=签字，4=审核，5=审核中，6=审核不通过，7=已调差状态) -->
        <!-- <el-form-item label="NCC单据状态" prop="fbillflag">
          <el-select v-model="queryParams.fbillflag" placeholder="请选择单据状态" clearable style="width: 240px">
            <el-option label="作废" value="1"></el-option>
            <el-option label="自由" value="2"></el-option>
            <el-option label="签字" value="3"></el-option>
            <el-option label="审核" value="4"></el-option>
            <el-option label="审核中" value="5"></el-option>
            <el-option label="审核不通过" value="6"></el-option>
            <el-option label="已调差状态" value="7"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="仓库" prop="cwarehouseid">
          <el-select
            v-model="queryParams.cwarehouseid"
            placeholder="请选择仓库"
            size="small"
            filterable
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in NccStockOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="物料" prop="material">
          <el-select
            v-model="queryParams.material"
            placeholder="请输入物料"
            clearable
            style="width: 240px"
            remote
            :remote-method="searchSelectNccMaterial"
            :loading="loading"
            filterable
          >
            <el-option
              v-for="item in materialNameOptions"
              :key="item.pk"
              :label="item.name"
              :value="item.pk"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="业务员" prop="cemployeeid">
          <el-select v-model="queryParams.cemployeeid" placeholder="请输入人员信息" clearable style="width: 240px" remote
            :remote-method="searchSelectNccUserCode" :loading="loading" filterable>
            <el-option v-for="item in usernameOptions" :key="item.pk" :label="item.name" :value="item.pk" />
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="业务部门" prop="deptName">
          <el-select v-model="queryParams.deptName" placeholder="请输入业务部门" clearable style="width: 240px" remote
            :remote-method="searchSelectNccDept" :loading="loading" filterable>
            <el-option v-for="item in deptNameOptions" :key="item.pk" :label="item.name" :value="item.pk" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="制单人" prop="billmaker">
          <el-select
            v-model="queryParams.billmaker"
            placeholder="请输入人员信息"
            clearable
            style="width: 240px"
            remote
            :remote-method="searchSelectNccUserCodePro"
            :loading="loading"
            filterable
          >
            <el-option
              v-for="item in usernameOptions"
              :key="item.pk"
              :label="item.name"
              :value="item.pk"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="签字人" prop="signatory">
          <el-select
            v-model="queryParams.signatory"
            placeholder="请输入人员信息"
            clearable
            style="width: 240px"
            remote
            :remote-method="searchSelectNccUserCode"
            :loading="loading"
            filterable
          >
            <el-option
              v-for="item in usernameOptions"
              :key="item.pk"
              :label="item.name"
              :value="item.pk"
            />
          </el-select>
        </el-form-item>

        <!-- 表单操作项:查询/重置按钮 -->
        <el-form-item style="margin-left: 45px">
          <el-button type="primary" icon="Search" @click="handleQuery"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格部分 -->
    <el-card class="mt20">
      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="6"
          ><span style="font-size: large">其他入库单</span></el-col
        >
        <el-col :span="1.5">
          <el-button
            type="primary"
            @click="handleAdd"
            v-hasPermi="['order:purchase:add']"
            >创建其他入库单</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="headerList"
        v-loading="loading"
        border
        class="mt20"
        :row-key="(row) => `${row.vbillcode}_${row.createTime}`"
        :expand-row-keys="expandKeys"
        @expand-change="handleExpandChange"
      >
        <!-- 单据明细 -->
        <el-table-column type="expand" width="40">
          <template #default="{ row }">
            <div style="padding: 0 50px 20px 50px">
              <!-- <h3>单据明细</h3> -->
              <el-row
                :gutter="10"
                class="mb8"
                type="flex"
                justify="space-between"
              >
                <el-col :span="6"
                  ><span style="font-size: large">单据明细</span></el-col
                >
                <!-- <el-col :span="1.5">
                  <el-button type="primary" plain icon="Plus" @click="handleAdd(row)"
                    v-hasPermi="['order:purchase:add']">创建入库单</el-button>
                </el-col> -->
              </el-row>
              <!-- 修改此处的数据绑定，使用 row.detailData 获取对应明细数据 -->
              <el-table :data="row.detailData" border>
                <el-table-column
                  prop="crowno"
                  label="行号"
                  align="center"
                  width="50"
                />
                <el-table-column label="单据明细号" align="center" width="100">
                  <template #default="{ $index, row }">
                    {{ `${row.vbillcode}-${$index + 1}` }}
                    <span style="display: none">{{
                      (row.rowNumber = `${row.vbillcode}-${$index + 1}`)
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="物料信息" align="center">
                  <template #default="{ row }">
                    <div v-if="row.cmaterialvid">
                      编码：{{ row.cmaterialvid.code }}
                    </div>
                    <div v-if="row.cmaterialvid">
                      名称：{{ row.cmaterialvid.name }}
                    </div>
                    <!-- <div v-if="row.cmaterialvid">主键：{{ row.cmaterialvid.pk }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column label="物料管理信息" align="center">
                  <template #default="{ row }">
                    <div v-if="row.additionMap">
                      GMP码：{{ row.additionMap.graphid }}
                    </div>
                    <div v-if="row.additionMap">
                      型号：{{ row.additionMap.materialtype }}
                    </div>
                    <div v-if="row.additionMap">
                      规格：{{ row.additionMap.spece }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="单位信息" align="center">
                  <template #default="{ row }">
                    <div v-if="row.castunitid">
                      编码：{{ row.castunitid.code }}
                    </div>
                    <div v-if="row.castunitid">
                      名称：{{ row.castunitid.name }}
                    </div>
                    <!-- <div v-if="row.castunitid">主键：{{ row.castunitid.pk }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column label="主单位信息" align="center">
                  <template #default="{ row }">
                    <div v-if="row.cunitid">编码：{{ row.cunitid.code }}</div>
                    <div v-if="row.cunitid">名称：{{ row.cunitid.name }}</div>
                    <!-- <div v-if="row.cunitid">主键：{{ row.cunitid.pk }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="vchangerate"
                  label="换算率"
                  align="center"
                />
                <!-- <el-table-column prop="pk_batchcode" label="批次主键" align="center" /> -->
                <el-table-column label="生产商信息" align="center">
                  <template #default="{ row }">
                    <div v-if="row.cproductorid">
                      编码：{{ row.cproductorid.code }}
                    </div>
                    <div v-if="row.cproductorid">
                      名称：{{ row.cproductorid.name }}
                    </div>
                    <!-- <div v-if="row.cproductorid">主键：{{ row.cproductorid.pk }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column
                  label="库存状态"
                  prop="cstateid"
                  align="center"
                >
                  <template #default="{ row }">
                    <dict-tag
                      :options="dict.type.inventory_status_type"
                      :value="row.cstateid"
                    ></dict-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="nshouldnum"
                  label="应收主数量"
                  align="center"
                />
                <el-table-column
                  prop="nshouldassistnum"
                  label="应收辅数量"
                  align="center"
                />
                <el-table-column
                  prop="nnum"
                  label="实收主数量"
                  align="center"
                />
                <el-table-column
                  prop="nassistnum"
                  label="实收辅数量"
                  align="center"
                />
                <el-table-column label="货位" align="center">
                  <template #default="{ row }">
                    <div v-if="row">{{ row.skuUnitCode }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="生产日期" align="center">
                  <template #default="{ row }">{{
                    formatDate(row.dproducedate)
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="vbatchcode"
                  label="批次号"
                  align="center"
                />
                <el-table-column label="有效期至" align="center">
                  <template #default="{ row }">{{
                    formatDate(row.dvalidate)
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="vbcdef1"
                  label="合箱说明"
                  align="center"
                />
                <el-table-column label="供应商批次号" align="center">
                  <template #default="{ row }">{{
                    row.vvendbatchcode
                  }}</template>
                </el-table-column>
                <el-table-column label="供应商信息" align="center">
                  <template #default="{ row }">
                    <div v-if="row.cvendorid">
                      编码：{{ row.cvendorid.code }}
                    </div>
                    <div v-if="row.cvendorid">
                      名称：{{ row.cvendorid.name }}
                    </div>
                    <!-- <div v-if="row.cvendorid">主键：{{ row.cvendorid.pk }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="vbcdef2"
                  label="供应商代码"
                  align="center"
                />
                <el-table-column label="复检有效期" align="center">
                  <template #default="{ row }">{{
                    formatDate(row.drecheckutil_148)
                  }}</template>
                </el-table-column>
                <el-table-column label="入库日期" align="center">
                  <template #default="{ row }">{{
                    formatDate(row.dbizdate)
                  }}</template>
                </el-table-column>
                <el-table-column label="持有人/注册人" align="center">
                  <template #default="{ row }">
                    <!-- <div v-if="row.pk_holder_148">编码：{{ row.pk_holder_148.code }}</div> -->
                    <div v-if="row.pk_holder_148">
                      {{ row.pk_holder_148.name }}
                    </div>
                    <!-- <div v-if="row.pk_holder_148">主键：{{ row.pk_holder_148.pk }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="vapprovalnumber_148"
                  label="批准文号"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="{ row }">
                    <div style="margin: 5px">
                      <el-button
                        v-if="
                          row.skuState == 3 &&
                          row.vbatchcode &&
                          row.cstateid &&
                          row.dproducedate &&
                          row.dvalidate
                        "
                        link
                        size="small"
                        type="success"
                        plain
                        @click="handleQms(row)"
                        >请验</el-button
                      >
                    </div>
                    <div style="margin: 5px">
                      <el-button
                        v-if="row.skuState == 0"
                        link
                        size="small"
                        type="warning"
                        plain
                        @click="handleGoodsLit(row)"
                        v-hasPermi="['order:otherinbound:goodsLit']"
                        >修改<br />货位</el-button
                      >
                    </div>
                    <div style="margin: 5px">
                      <el-button
                        v-show="row.nshouldnum > 0"
                        link
                        size="small"
                        type="primary"
                        plain
                        @click="handlePrint(row)"
                        >打印</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>

        <!-- 单据表头 -->
        <el-table-column label="单据编号" align="center">
          <template #default="{ row }">{{ row.vbillcode }}</template>
        </el-table-column>
        <el-table-column label="单据日期" align="center">
          <template #default="{ row }">{{
            formatDate(row.dbilldate)
          }}</template>
        </el-table-column>
        <el-table-column label="仓库信息" align="center" min-width="100">
          <template #default="{ row }">
            <div v-if="row.cwarehouseid">编码：{{ row.cwarehouseid.code }}</div>
            <div v-if="row.cwarehouseid">名称：{{ row.cwarehouseid.name }}</div>
            <!-- <div v-if="row.cwarehouseid">主键：{{ row.cwarehouseid.pk }}</div> -->
          </template>
        </el-table-column>
        <el-table-column label="出入库类型" align="center">
          <template #default="{ row }">
            <dict-tag
              :options="dict.type.other_in_type"
              :value="row.ctrantypeid"
            ></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="制单人信息" align="center" min-width="100">
          <template #default="{ row }">
            <div v-if="row.billmaker">编码：{{ row.billmaker.code }}</div>
            <div v-if="row.billmaker">名称：{{ row.billmaker.name }}</div>
            <!-- <div v-if="row.billmaker">主键：{{ row.billmaker.pk }}</div> -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="单据状态" align="center" width="80">
          <template #default="{ row }">{{ row.billsState }}</template>
        </el-table-column> -->
        <el-table-column label="单据状态" align="center" width="100">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.billsState)">
              {{ getBillsState(row.billsState) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="签字人" align="center">
          <template #default="{ row }">{{ row.signatory }}</template>
        </el-table-column>
        <el-table-column label="签字时间" align="center">
          <template #default="{ row }">{{
            formatDate(row.signatoryTime)
          }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <div style="margin: 5px">
              <el-button
                link
                size="small"
                type="primary"
                plain
                @click="toggleExpand(row)"
                >{{
                  expandedRows.includes(row.vbillcode) ? "收起" : "查看"
                }}</el-button
              >
            </div>
            <div v-if="row.billsState == 2" style="margin: 5px">
              <el-button
                link
                size="small"
                type="success"
                plain
                @click="handleSign(row)"
                v-hasPermi="['order:otherinbound:audit']"
                >签字</el-button
              >
            </div>
            <div v-if="row.billsState == 0" style="margin: 5px">
              <el-button
                link
                size="small"
                type="danger"
                plain
                @click="handleDelete(row)"
                v-hasPermi="['order:otherinbound:delete']"
                >作废</el-button
              >
            </div>
            <div v-if="row.billsState == 0" style="margin: 5px">
              <el-button
                link
                size="small"
                type="warning"
                plain
                @click="handleModify(row)"
                v-hasPermi="['order:otherinbound:edit']"
                >修改</el-button
              >
            </div>
            <div
              v-if="row.billsState == 1 || row.billsState == 2"
              style="margin: 5px"
            >
              <el-button
                link
                size="small"
                type="info"
                plain
                @click="handleBack(row)"
                v-hasPermi="['order:otherinbound:edit']"
                >取消<br />提取</el-button
              >
            </div>
            <div v-if="row.billsState == 6" style="margin: 5px">
              <el-button
                link
                size="small"
                type="success"
                plain
                @click="handleInventory(row)"
                v-hasPermi="['order:otherinbound:audit']"
                >下账</el-button
              >
            </div>
            <div v-if="row.billsState == 3" style="margin: 5px">
              <el-button
                link
                size="small"
                type="danger"
                plain
                @click="handleSignatoryTime(row)"
                >签字<br />修改</el-button
              >
            </div>
            <div style="margin: 5px">
              <el-button
                link
                size="small"
                type="info"
                plain
                @click="printCode(row.vbillcode)"
                >单据打印</el-button
              >
            </div>
            <div style="margin: 5px">
              <el-button
                link
                size="small"
                type="info"
                plain
                @click="printMore(row.detailData)"
                >批量打印</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="float: right; margin: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 作废确认对话框 -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="作废原因"
      width="35%"
      @close="resetDeleteReason"
    >
      <el-form>
        <el-form-item label="">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入作废原因"
            v-model="deleteReason"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">作废</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改货位对话框 -->
    <el-dialog
      :visible.sync="goodsLitDialogVisible"
      title="修改货位"
      width="40%"
      @close="resetGoodsLitDialog"
    >
      <el-form>
        <el-form-item label="单据编号">
          <el-input v-model="currentVbillcode" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="表体主键">
          <el-input v-model="currentCgeneralbid" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="仓库">
          <el-input v-model="cwarehouseidName" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="货位">
          <el-input
            v-model.trim="freight"
            placeholder="请输入货位"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="checkFreight">选择判断</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="goodsLitDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="confirmGoodsLit"
            :disabled="confirmBtnDisabled"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 修改签字时间对话框 -->
    <el-dialog
      :visible.sync="signatoryTimeDialogVisible"
      title="修改签字时间"
      width="35%"
      @close="resetSignatoryTimeDialog"
    >
      <el-form>
        <el-form-item label="单据编号">
          <el-input v-model="obtainVbillcode" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="表头主键">
          <el-input v-model="obtainCgeneralhid" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="签字时间">
          <el-date-picker
            v-model="obtainSignatoryTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="signatoryTimeDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="confirmSignatoryTime"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>

    <printDialog
      ref="printDialogRef"
      :visible.sync="dialogVisible"
    ></printDialog>
    <billDialog ref="billDialogRef" :visible.sync="billVisiable"></billDialog>
    <morePrint
      ref="morePrintDialogRef"
      :visible.sync="morePrintDialog"
    ></morePrint>
  </div>
</template>

<script>
// 获取WMS其他入库单接口
import { getOtherInboundInfo } from "@/api/storage/otherStore.js";
// 获取其他入库单签字接口
import { updateOtherInbound } from "@/api/storage/otherStore.js";
// 获取其他入库单作废接口
import { deleteOtherInbound } from "@/api/storage/otherStore.js";
// 其他入库取消提取接口
import { createOtherInboundBack } from "@/api/storage/otherStore.js";
// 其他入库WMS下账接口
import { createOtherInboundInventory } from "@/api/storage/otherStore.js";

// 检查货位是否可以用接口
import { getWMSCommonCheckFreight } from "@/api/public.js";
// 修改货位用接口
import { createWMSCommonCheckFreight } from "@/api/public.js";
// 修改签字时间接口
import { createWMSCommonSignTime } from "@/api/public.js";

// 引入下拉框方法组件
import SearchSelect from "@/views/components/dropDown/searchSelect.js";
//单据模板打印
import billDialog from "@/views/storage/buyStore/components/billDialog.vue";
import printDialog from "@/views/supply/materialSupply/printDialog.vue";
import morePrint from "@/views/storage/buyStore/components/morePrint.vue";
export default {
  // 用于存储需要加载的字典类型
  dicts: ["other_in_type", "inventory_status_type"],
  data() {
    return {
      nccList: [], // 存储NCC列表数据
      currentPage: 1, // 当前页
      pageSize: 5, // 每页显示条数
      total: 0, // 总条目数，需从后端返回
      loading: false, // 控制加载状态
      queryParams: {
        startDate: "", // 示例开始日期
        endDate: "", // 示例结束日期
        wmsBillCode: "", // WMS入库单号
        isCross: "", // 是否越库
        billsState: "", // WMS单据状态
        fbillflag: "", // NCC单据状态
        cwarehouseid: "", // 仓库
        material: "", // 物料
        cemployeeid: "", //业务员
        deptName: "", // 业务部门
        billmaker: "", // 制单人
        signatory: "", // 签字人
      },
      headerList: [],
      detailsList: [],
      dbilldate: [], // 日期范围初始化为空数组
      expandKeys: [], // 当前展开的行的 key 数组
      expandedRows: [], // 记录已展开行的 key
      responseData: [], // 初始化 responseData，用于存储接口返回数据
      isRequesting: false, // 新增一个属性，用于标识是否正在请求接口

      deleteDialogVisible: false, // 控制作废对话框的显示与隐藏
      deleteReason: "", // 存储用户输入的作废原因

      goodsLitDialogVisible: false, // 控制修改货位对话框的显示与隐藏
      currentVbillcode: "", // 当前操作的单据编号
      currentCgeneralbid: "", // 当前操作的表体主键
      cwarehouseidName: "", // 当前操作的仓库名称
      cwarehouseidPk: "", // 当前操作的仓库主键
      freight: "", // 货位
      checkResult: null, // 货位检查结果
      confirmBtnDisabled: true, // 确认按钮禁用状态

      signatoryTimeDialogVisible: false, // 控制修改签字时间对话框的显示与隐藏
      obtainVbillcode: "", // 获取此行的单据编号
      obtainCgeneralhid: "", // 获取此行的表头主键
      obtainSignatoryTime: null, // 获取此行的签字时间

      NccStockOptions: [], // 查询NCC仓库信息_1
      deptNameOptions: [], // 查询NCC-普锐特部门信息_4
      materialNameOptions: [], // 查询NCC物料信息_5
      usernameOptions: [], // 查询NCC用户信息_11
      pickerOptions: {
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置开始时间和结束时间都为当天的零点到当天的23点59分59秒
              start.setHours(0, 0, 0, 0);
              end.setHours(23, 59, 59, 999);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogVisible: false, // 控制对话框显示隐藏的初始状态为false，即隐藏
      printData: {},
      billVisiable: false, //单据打印
      morePrintDialog: false, //批量打印
    };
  },
  components: {
    printDialog,
    billDialog,
    morePrint,
  },
  mounted() {
    this.queryOtherInboundList(); // 查询单据信息列表
    this.searchNCCStockList(); // 1、获取NCC仓库信息
  },
  methods: {
    //批量物料打印
    printMore(row) {
      this.morePrintDialog = true;
      this.$refs.morePrintDialogRef.openDialog(row);
    },
    //单据打印
    printCode(row) {
      this.billVisiable = true;
      this.$refs.billDialogRef.open(row);
    },
    // 标签打印 --- 弹出页面
    handlePrint(row) {
      this.dialogVisible = true;
      this.$refs.printDialogRef.openDialog(row, row.rowNumber);
    },

    // 根据 billsState 返回对应的文字描述
    getBillsState(flag) {
      const statusMap = {
        0: "未收货",
        1: "已收货",
        2: "已验收",
        3: "已上架",
        4: "已请验",
        5: "请验完成",
        6: "WMS处理失败",
        9: "已作废",
      };
      return statusMap[flag] || "未知状态";
    },

    // 根据 billsState 返回 Element UI 标签的类型
    getTagType(flag) {
      const tagMap = {
        0: "", // 默认标签
        1: "success", // 绿色
        2: "info", // 蓝色
        3: "warning", // 黄色
        4: "", // 默认标签
        5: "success", // 绿色
        6: "warning", // 黄色
        9: "danger", // 红色
      };
      return tagMap[flag] || ""; // 默认无类型
    },

    // 格式化时间
    formatDate(date) {
      if (!date) return ""; // 如果 `date` 为空或 `null`，返回占位符
      return this.$dayjs(date).isValid()
        ? this.$dayjs(date).format("YYYY-MM-DD")
        : "-";
    },

    // 用于去除指定字段前后的空格
    trimInput(field) {
      this.queryParams[field] = this.queryParams[field].trim();
    },

    // 处理行的展开/收起
    handleExpandChange(row) {
      const rowKey = `${row.vbillcode}_${row.createTime}`;
      const index = this.expandKeys.indexOf(rowKey);
      if (index === -1) {
        // 如果当前行未展开，则展开该行，并收起其他行
        this.expandKeys = [rowKey];
      } else {
        // 如果当前行已展开，则收起该行
        this.expandKeys = [];
      }
    },

    // 修改货位按钮对话框
    handleGoodsLit(row) {
      this.goodsLitDialogVisible = true;
      this.currentVbillcode = row.vbillcode; // 赋值当前行的单据编号
      this.currentCgeneralbid = row.cgeneralbid; // 赋值当前行的表体主键
      this.cwarehouseidName = row.cwarehouseid.name; // 当前操作的仓库名称
      this.cwarehouseidPk = row.cwarehouseid.pk; // 当前操作的仓库主键
      this.freight = ""; // 重置货位输入框
      this.checkResult = null; // 重置检查结果
      this.confirmBtnDisabled = true; // 重置确认按钮状态
    },
    // 检查货位是否可用
    checkFreight() {
      if (!this.freight) {
        this.$message.error("请先输入货位");
        return;
      }

      const params = {
        freight: this.freight,
        warehouse: this.cwarehouseidPk,
      };

      this.$loading({
        lock: true,
        text: "检查中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      console.log("货位是否可用params=", params);

      getWMSCommonCheckFreight(params)
        .then((response) => {
          console.log("货位是否可用response=", response);

          if (
            response.code !== 200 ||
            !response.data ||
            !response.data.length
          ) {
            this.$message.error(
              "获取货位状态失败,请检查是否为本仓库可用货位！"
            );
            this.confirmBtnDisabled = true;
            return;
          }

          this.checkResult = response.data[0]; // 获取第一个结果

          // 判断货位启用状态
          if (this.checkResult.EnableState === "1") {
            // 货位已启用，判断是否已使用
            if (this.checkResult.IsUseUnit === 1) {
              this.$confirm("货位已被使用，确定要继续修改货位吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.confirmBtnDisabled = false; // 允许确认
                })
                .catch(() => {
                  // 用户取消，保持确认按钮禁用
                  this.confirmBtnDisabled = true;
                });
            } else {
              // 货位未使用，直接启用确认按钮
              this.confirmBtnDisabled = false;
              this.$message.success("货位可用");
            }
          } else {
            // 货位未启用
            this.confirmBtnDisabled = true;
            this.$message.error("货位未启用，请先启用货位再操作");
          }
        })
        .catch((error) => {
          console.error("检查货位失败", error);
          this.$message.error("检查货位失败，请稍后重试");
          this.confirmBtnDisabled = true;
        })
        .finally(() => {
          this.$loading().close();
        });
    },
    // 确定修改货位
    confirmGoodsLit() {
      if (this.confirmBtnDisabled) return;

      this.$loading({
        lock: true,
        text: "处理中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // 调用修改货位接口，传递单据号和货位作为参数
      createWMSCommonCheckFreight(
        this.currentVbillcode,
        this.currentCgeneralbid,
        this.freight
      )
        .then((response) => {
          console.log("修改货位response=", response);
          if (response.code === 200) {
            // this.$message.success("货位修改成功");
            this.$message({
              message: response.msg,
              type: "success",
            });
            this.goodsLitDialogVisible = false;
            this.queryOtherInboundList(); // 查询单据信息列表
          } else {
            // this.$message.error(response.msg || "货位修改失败");
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        })
        .catch((error) => {
          // console.error("修改货位失败", error);
          this.$message.error("修改货位失败，请稍后重试");
        })
        .finally(() => {
          this.$loading().close();
          this.resetGoodsLitDialog();
        });
    },
    // 重置对话框状态
    resetGoodsLitDialog() {
      // this.currentVbillcode = "";
      this.freight = "";
      this.checkResult = null;
      this.confirmBtnDisabled = true;
    },

    // 封装通用方法，用于获取最新数据并提取每行的 billsState 字段
    checkAndPerformAction(cgeneralhid) {
      if (this.isRequesting) {
        console.log("当前正在请求中，不重复发起请求");
        return;
      }
      this.isRequesting = true;
      this.loading = true;
      console.log(`开始获取最新数据，cgeneralhid: ${cgeneralhid}`);

      return this.queryOtherInboundList()
        .then(() => {
          console.log("成功获取到最新数据");
          const row = this.headerList.find(
            (item) => item.cgeneralhid === cgeneralhid
          );
          console.log(`提取到的 row: ${row}`);
          this.loading = false;
          this.isRequesting = false;
          const billsState = row ? row.billsState : null;
          console.log(`提取到的 billsState: ${billsState}`);
          return billsState;
        })
        .catch((error) => {
          this.loading = false;
          this.isRequesting = false;
          console.log("获取最新数据失败:", error);
          return null;
        });
    },

    // 处理请验按钮点击事件
    handleQms(row) {
      // console.log("请验按钮row", row)
      // 检查 row 是否有效
      if (!row || !row.vbillcode) {
        this.$message.error("单据编号不存在，无法新增！");
        return;
      }
      // 直接从 row 中获取 cgeneralbid
      if (!row || !row.cgeneralbid) {
        this.$message.error("明细中的表体主键不存在，无法新增！");
        return;
      }
      this.$router.push({
        path: "/storage/otherStore/qmsDocument",
        query: {
          vbillcode: row.vbillcode,
          cgeneralbid: row.cgeneralbid,
        },
      });
    },

    // 处理WMS下账钮点击事件
    handleInventory(row) {
      const cgeneralhid = row.cgeneralhid;
      this.checkAndPerformAction(cgeneralhid).then((billsState) => {
        if (billsState == "6") {
          // 如果正在请求中，直接返回，避免重复请求
          if (this.isRequesting) {
            return;
          }
          // 设置正在请求状态
          this.isRequesting = true;
          // 开启加载状态提示
          this.loading = true;

          const headerid = row.cgeneralhid;
          console.log("WMS下账headerid=", headerid);
          createOtherInboundInventory(headerid)
            .then((response) => {
              // 处理请求成功的逻辑
              console.log("其他入库WMS下账成功", response);
              if (response.code === 200) {
                this.$message({
                  message: response.msg,
                  type: "success",
                });
                this.queryOtherInboundList(); // 查询单据信息列表
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                });
              }
            })
            .catch((error) => {
              // 请求失败后的处理逻辑
              console.log("其他入库WMS下账失败", error);
            })
            .finally(() => {
              // 无论请求成功还是失败，都关闭加载状态和请求状态
              this.loading = false;
              this.isRequesting = false;
            });
        } else {
          this.$message.error("当前状态无法WMS下账，请刷新页面重试");
        }
      });
    },

    // 处理取消提取
    handleBack(row) {
      const cgeneralhid = row.cgeneralhid;
      this.checkAndPerformAction(cgeneralhid).then((billsState) => {
        if (["1", "2"].includes(billsState)) {
          // 如果正在请求中，直接返回，避免重复请求
          if (this.isRequesting) {
            return;
          }
          // 设置正在请求状态
          this.isRequesting = true;
          // 开启加载状态提示
          this.loading = true;

          const headerid = row.cgeneralhid;
          console.log("取消提取headerid=", headerid);
          createOtherInboundBack(headerid)
            .then((response) => {
              // 处理请求成功的逻辑
              console.log("其他入库取消提取成功", response);
              if (response.code === 200) {
                this.$message({
                  message: response.msg,
                  type: "success",
                });
                this.queryOtherInboundList(); // 查询单据信息列表
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                });
              }
            })
            .catch((error) => {
              // 请求失败后的处理逻辑
              console.log("其他入库取消提取失败", error);
            })
            .finally(() => {
              // 无论请求成功还是失败，都关闭加载状态和请求状态
              this.loading = false;
              this.isRequesting = false;
            });
        } else {
          this.$message.error("当前状态无法取消提取，请刷新页面重试");
        }
      });
    },

    // 处理修改按钮点击事件
    handleModify(row) {
      const cgeneralhid = row.cgeneralhid;
      this.checkAndPerformAction(cgeneralhid).then((billsState) => {
        if (billsState == "0") {
          // 检查 row 是否有效
          if (!row || !row.vbillcode) {
            this.$message.error("单据编号不存在，无法修改！");
            return;
          }
          this.$router.push({
            path: "/storage/otherStore/alterDocument",
            query: {
              vbillcode: row.vbillcode,
            },
          });
        } else {
          this.$message.error("当前状态无法修改，请刷新页面重试");
        }
      });
    },

    // 处理作废按钮点击事件
    // handleDelete(row) {
    //   const cgeneralhid = row.cgeneralhid;
    //   this.checkAndPerformAction(cgeneralhid).then((billsState) => {
    //     if (billsState == "0") {
    //       this.currentCgeneralhid = cgeneralhid;
    //       this.deleteDialogVisible = true;
    //     } else {
    //       this.$message.error("当前状态无法作废，请刷新页面重试");
    //     }
    //   });
    // },
    handleDelete(row) {
      const cgeneralhid = row.cgeneralhid;
      this.checkAndPerformAction(cgeneralhid).then((billsState) => {
        if (billsState === "0") {
          this.$confirm(
            "请核实标签数据清空后再进行单据作废，是否继续？",
            "作废前提示",
            {
              confirmButtonText: "继续作废",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              // 用户确认后再打开作废对话框
              this.currentCgeneralhid = cgeneralhid;
              this.deleteDialogVisible = true;
            })
            .catch(() => {
              // 用户取消，不做任何操作
              this.$message.info("已取消作废操作");
            });
        } else {
          this.$message.error("当前状态无法作废，请刷新页面重试");
        }
      });
    },
    // 确认作废操作
    confirmDelete() {
      if (!this.deleteReason) {
        this.$message({
          message: "请输入作废原因",
          type: "warning",
        });
        return;
      }
      const cgeneralhid = this.currentCgeneralhid;
      const query = {
        reason: this.deleteReason,
      };
      deleteOtherInbound(cgeneralhid, query)
        .then((response) => {
          // 处理请求成功的逻辑
          console.log("其他入库单作废成功", response);
          this.$message({
            message: response.msg,
            type: "success",
          });
          // 可以在这里刷新表格数据等操作
          // this.getTableData();
          this.deleteDialogVisible = false;
          this.queryOtherInboundList(); // 查询单据信息列表
          this.resetDeleteReason();
        })
        .catch((error) => {
          // 处理请求失败的逻辑
          console.error("其他入库单作废失败", error);
          this.$message({
            message: response.msg,
            type: "error",
          });
        });
    },
    // 重置作废原因
    resetDeleteReason() {
      this.deleteReason = "";
    },

    // 修改签字时间按钮点击事件
    handleSignatoryTime(row) {
      this.signatoryTimeDialogVisible = true; // 控制修改签字时间对话框的显示与隐藏
      this.obtainVbillcode = row.vbillcode; // 赋值当前行的单据编号
      this.obtainCgeneralhid = row.cgeneralhid; // 赋值当前行的表头主键
      this.obtainSignatoryTime = row.signatoryTime; // 赋值当前行的签字时间
    },
    // 确定修改签字时间
    confirmSignatoryTime() {
      // 显示加载状态
      const loadingInstance = this.$loading({
        lock: true,
        text: "处理中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // 构造请求参数
      const params = {
        vbillcode: this.obtainVbillcode, // 单据编号
        signTime: this.obtainSignatoryTime, // 签字时间
        cgeneralhid: this.obtainCgeneralhid, // 表头主键
      };

      // 调用修改签字时间接口
      createWMSCommonSignTime(params)
        .then((response) => {
          console.log("修改签字时间接口响应:", response);

          // 处理响应
          if (response.code === 200) {
            this.$message({
              message: response.msg,
              type: "success",
              duration: 3000,
            });

            // 关闭对话框并刷新数据
            this.signatoryTimeDialogVisible = false;
            this.queryOtherInboundList(); // 查询单据信息列表
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 3000,
            });
          }
        })
        .catch((error) => {
          console.error("修改签字时间接口错误:", error);
        })
        .finally(() => {
          // 隐藏加载状态
          loadingInstance.close();
          // 重置对话框状态
          this.resetSignatoryTimeDialog();
        });
    },
    // 重置修改签字时间对话框状态
    resetSignatoryTimeDialog() {},

    // 处理签字按钮点击事件
    handleSign(row) {
      let confirmMessage = "签字之前请先确认标签已打印！";
      if (row.ctrantypeid === "0001A11000000000CJUM") {
        confirmMessage = "签字之前请确认出库单已上架，并确认入库标签已打印!";
      }
      this.$confirm(confirmMessage, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const cgeneralhid = row.cgeneralhid;
          this.checkAndPerformAction(cgeneralhid).then((billsState) => {
            if (billsState == "2") {
              // 如果正在请求中，直接返回，避免重复请求
              if (this.isRequesting) {
                return;
              }
              // 设置正在请求状态
              this.isRequesting = true;
              // 开启加载状态提示
              this.loading = true;

              // 根据接口要求准备签字相关的数据
              const signData = {
                cgeneralhid: cgeneralhid,
              };
              console.log("signData=", signData);
              updateOtherInbound(cgeneralhid, signData)
                .then((response) => {
                  // 处理请求成功的逻辑
                  console.log("采购入库单签字成功", response);
                  if (response.code === 200) {
                    this.$message({
                      message: response.msg,
                      type: "success",
                    });
                    this.queryOtherInboundList();
                  } else {
                    this.$message({
                      message: response.msg,
                      type: "error",
                    });
                  }
                })
                .catch((error) => {
                  // 请求失败后的处理逻辑
                  console.log("采购入库单签字失败", error);
                })
                .finally(() => {
                  // 无论请求成功还是失败，都关闭加载状态和请求状态
                  this.loading = false;
                  this.isRequesting = false;
                });
            } else {
              this.$message.error("当前状态无法签字，请刷新页面重试");
            }
          });
        })
        .catch(() => {
          // 用户点击取消，不做任何操作
        });
    },

    // 控制 expandKeys 和 expandedRows 的状态同步更新
    toggleExpand(row) {
      const rowKey = `${row.vbillcode}_${row.createTime}`;

      // 判断当前行是否已展开
      const isExpanded = this.expandedRows.includes(rowKey);

      // 如果当前行已经展开，点击"收起"，否则点击"查看"
      if (isExpanded) {
        // 当前行已展开：从 expandedRows 和 expandKeys 移除
        this.expandedRows = this.expandedRows.filter((v) => v !== rowKey);
        this.expandKeys = this.expandKeys.filter((v) => v !== rowKey);
      } else {
        // 当前行未展开：清空所有已展开的行，然后将当前行添加到 expandKeys 和 expandedRows
        this.expandKeys = [rowKey];
        this.expandedRows = [rowKey];
      }
    },

    /**
     * 跳转到添加单据
     */
    handleAdd() {
      this.$router.push({
        path: "/storage/otherStore/newDocument",
      });
    },

    // 页大小变化
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.currentPage = 1; // 重置为第一页
      this.queryOtherInboundList(); // 重新查询
    },

    // 当前页变化
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.queryOtherInboundList(); // 重新查询
    },
    /**
     * 查询单据信息列表
     */
    queryOtherInboundList() {
      this.loading = true; // 设置加载状态为 true

      // 清空旧数据
      this.headerList = []; // +++ 新增清空操作

      let formattedDbilldate = "";
      if (
        this.queryParams.dbilldate &&
        this.queryParams.dbilldate.length === 2
      ) {
        const [start, end] = this.queryParams.dbilldate;
        formattedDbilldate = `${start}~${end}`;
        console.log("成功格式化日期范围:", formattedDbilldate); // 添加这行日志，看是否能正常执行到这一步
      }
      const params = {
        vbillcode: this.queryParams.vbillcode || "", // 单据编号
        dbilldate: formattedDbilldate, // 日期范围
        wmsBillCode: this.queryParams.wmsBillCode || "", // WMS入库单号
        isCross: this.queryParams.isCross || "", // 是否越库
        billsState: this.queryParams.billsState || "", // WMS单据状态
        fbillflag: this.queryParams.fbillflag || "", // NCC单据状态
        cwarehouseid: this.queryParams.cwarehouseid || "", // 仓库
        material: this.queryParams.material || "", // 物料
        cbizid: this.queryParams.cemployeeid || "", // 业务员
        cdptvid: this.queryParams.deptName || "", // 业务部门
        billmaker: this.queryParams.billmaker || "", // 制单人
        signatory: this.queryParams.signatory || "", // 签字人

        pageSize: this.pageSize, // 每页条数
        pageNum: this.currentPage, // 当前页数
      };
      console.log("params 数据:", params);

      return getOtherInboundInfo(params)
        .then((response) => {
          this.loading = false; // 请求完成后，设置加载状态为 false
          this.responseData = response.rows;
          // 更新 total
          this.total = response.total;

          // 解析 header 和 details 数据
          if (this.responseData.length > 0) {
            this.headerList = this.responseData.map((item) => {
              const header = item.header;
              header.detailData = item.details; // 存放当前表头对应的明细数据
              return header;
            });
            console.log("headerList 数据:", this.headerList);
            if (response.code === 200) {
              // this.$message({
              //   message: response.msg,
              //   type: 'success'
              // });
              console.log("查询信息=", response.msg);
            } else {
              this.$message({
                message: response.msg,
                type: "error",
              });
            }
          } else {
            this.headerList = []; // 无数据时显示空 +++
            console.log("返回数据为空");
          }
          return this.responseData;
        })
        .catch((error) => {
          this.loading = false;
          console.log("接口请求出错:", error);
          throw error;
        });
    },
    /**
     * 查询操作的回调函数
     */
    handleQuery() {
      console.log("查询参数：", this.queryParams);
      if (this.isRequesting) {
        console.log("当前正在请求中，直接返回，不发起新请求");
        return; // 如果正在请求中，直接返回，不再发起新请求
      }
      this.isRequesting = true; // 设置为正在请求状态

      this.queryOtherInboundList()
        .then(() => {
          this.isRequesting = false; // 请求结束，设置为非请求状态
        })
        .catch((error) => {
          this.isRequesting = false; // 请求出错，同样设置为非请求状态
          console.log("接口请求出错:", error);
        });
    },

    // 1、获取NCC仓库信息
    searchNCCStockList() {
      this.loading = true;
      SearchSelect.searchNCCStockList(this)
        .then(() => {
          // 获取到仓库信息后，更新 NccStockOptions
          this.NccStockOptions = this.NccStockList.map((item) => ({
            label: item.label,
            value: item.value,
          }));
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 4、获取NCC-普锐特部门信息
    searchSelectNccDept(query) {
      SearchSelect.searchSelectNccDept(query, this);
    },
    // 5、获取NCC物料信息
    searchSelectNccMaterial(query) {
      SearchSelect.searchSelectNccMaterial(query, this);
    },
    // 11、获取NCC用户信息-code---(制单人)
    searchSelectNccUserCodePro(query) {
      SearchSelect.searchSelectNccUserCode(query, this);
    },
    // 11、获取NCC用户信息-code---(签字人)
    searchSelectNccUserCode(query) {
      SearchSelect.searchSelectNccUserCode(query, this);
    },

    /**
     * 重置表单操作
     * 将所有查询条件还原为初始状态
     */
    resetQuery() {
      this.queryParams = {
        // 单据编号
        vbillcode: "",
        // 单据日期/查询日期范围
        dbilldate: "",
      };
      console.log("已重置查询条件");
    },
  },
};
</script>

<style scoped>
/* 主容器样式：设置内边距，避免紧贴页面边缘 */
.app-container {
  padding: 20px;
}

/* 卡片样式：为每个表单块设置外边距，提升视觉效果 */
.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}
</style>
